<!-- 收益分析 -->
<template>
	<view class="yield">
		<z-paging ref="paging" v-model="dataList" @query="queryList" v-if="isshow">
			<view class="box" slot="top">
				<view class="bg">
					<!-- #ifdef APP-PLUS -->
					<Header title="收益分析" :isShowRight="false" @back="back" />
					<!-- #endif -->
					<view class="top">
						<view class="num">
							<view class="left">
								<view class="person">{{ info.shareNum }}</view>
								<view class="bot">
									<view class="cirle"></view>
									<view>推广人数</view>
								</view>
							</view>

							<view class="right">
								<view class="person">{{ info.orderNum }}</view>
								<view class="bot">
									<view class="cirle"></view>
									<view>推广单数</view>
								</view>
							</view>
						</view>

						<view class="photo">
							<view class="left" @click="goDetail">收益详情</view>
							<view class="right" @click="openPoster">分享</view>
						</view>
					</view>
					<!-- 我的分享 -->
					<view class="title">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img8.png"></image>
						<view>
							我的分享(
							<text>{{ info.shareNum }}</text>
							)
						</view>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="content">
					<view class="item" v-for="(item, index) in dataList" :key="index">
						<view class="left">
							<image v-if="item.headPortrait" :src="item.headPortrait" @error="imgError(index)"></image>
							<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/avatar@2x.png"></image>
							<view>{{ item.nickName }}</view>
						</view>
						<view class="right">
							加入时间
							<text>{{ item.createTime }}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<mosoweCanvasImage ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="600" width="350" />
		<!--海报弹窗 -->
		<u-popup :show="showQR" @close="showQR = false" @open="showQR = true" mode="center" bgColor="transparent">
			<view class="qrbox">
				<view class="qrpop">
					<image class="coverimg" :src="canvasUrl" mode=""></image>
					<image class="close" @click="showQR = false" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/blackClose.png" mode=""></image>
				</view>
				<view class="bot">
					<view class="btn" @click="share">分享</view>
					<view class="btn save" @click="saveimg">保存到本地</view>
				</view>
			</view>
		</u-popup>
		<!-- 个人海报分享弹窗 -->
		<share-popup :shareDate="shareDate" :show="show" @cancel="show = false"></share-popup>
	</view>
</template>

<script>
import { userPoster, extractRecord, analysis, shareList } from '@/apis/apis.js';
import Header from '@/components/c_header.vue';
import sharePopup from '@/components/share.vue';
import mosoweCanvasImage from '@/components/mosowe-canvas-image/mosowe-canvas-image.vue';
export default {
	components: {
		Header,
		sharePopup,
		mosoweCanvasImage
	},
	data() {
		return {
			info: {},
			type: null,
			dataList: [],
			posters: null,
			show: false, //分享弹窗
			showQR: false,
			shareDate: {},
			str: '',
			canvasUrl: '',
			lists: [
				{
					type: 'image',
					content: '',
					width: 350,
					height: 600,
					x: 0,
					y: 0
				},
				{
					type: 'qr',
					content: '',
					width: 80,
					height: 80,
					x: 240,
					y: 480
				}
			],
			isshow: false
		};
	},
	onLoad() {
		this.init();
	},
	onShow() {
		this.isshow = true;
	},
	onHide() {
		this.isshow = false;
	},
	methods: {
		// 分享
		share() {
			this.shareDate = {
				serviceId: '',
				title: '已知小课',
				summary: '邀请新用户',
				imageUrl: this.posters.posterUrl,
				memberId: uni.getStorageSync('USER_DATA').memberId, //用户id
				type: 0, //0	图文 1	纯文字 2	纯图片 3	音乐 4	视频 5	小程序
				objectType: 3 // 0话题 1课程 2拼单
			};
			this.show = true;
		},
		init() {
			analysis().then(res => {
				console.log(res, '海报');
				this.info = res.data;
			});
		},
		// 打开海报
		openPoster() {
			userPoster().then(res => {
				if (!res.data.posterUrl) {
					uni.showToast({
						title: '暂无内容',
						icon: 'none'
					});
					return;
				}
				console.log(res);
				this.posters = res.data;
				this.str = `${res.data.qrcodeLink}/#/pages/index/index${res.data.linkParam}`;
				this.shareDate = {
					serviceId: 0,
					title: '已知小课',
					summary: '邀请新用户',
					linkUrl: `${res.data.qrcodeLink}/#/pages/index/index${res.data.linkParam}`,
					imageUrl: res.data.posterUrl,
					memberId: uni.getStorageSync('USER_DATA').memberId, //用户id
					type: 0, //0	图文 1	纯文字 2	纯图片 3	音乐 4	视频 5	小程序
					objectType: 3 // 0话题 1课程 2拼单
				};
				this.show = true;
				// this.lists[0].content = res.data.posterUrl
				// this.lists[1].content = `${res.data.qrcodeLink}/#/pages/index/index${res.data.linkParam}`
				// this.$nextTick(() => {
				// 	this.$refs.mosoweCanvasComponents.createCanvas();
				// })
			});
		},
		_canvasImage(e) {
			this.canvasUrl = e;
			this.showQR = true;
		},
		saveimg() {
			uni.saveImageToPhotosAlbum({
				filePath: this.canvasUrl,
				success: () => {
					this.$u.toast('保存成功，快去分享到朋友圈吧~');
				},
				fail: () => {
					this.$u.toast('保存失败~');
				}
			});
		},
		back() {
			uni.navigateBack();
		},
		imgError(index) {
			// console.log(index)
			this.dataList[index].headPortrait = 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/avatar@2x.png';
		},
		goDetail() {
			uni.navigateTo({
				url: './detail'
			});
		},
		queryList(pageNo, pageSize) {
			shareList({
				pageNum: pageNo,
				pageSize: pageSize
			}).then(res => {
				console.log(res);
				this.$refs.paging.complete(res.data);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.yield {
	background-color: #eff1f3;

	.bg {
		background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/yield/bg1.png') no-repeat 100% -2rpx;
		background-size: cover;
		padding: 30rpx 28rpx 20rpx 30rpx;
		// height: 616rpx;

		.title {
			display: flex;
			align-items: center;
			margin-top: 28rpx;

			image {
				width: 28rpx;
				height: 14rpx;
				margin-right: 10rpx;
			}
		}

		.top {
			/* #ifdef APP-PLUS */
			margin-top: 100rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			margin-top: 40rpx;
			/* #endif */
			width: 100%;
			box-sizing: border-box;
			height: 372rpx;
			padding: 0 38rpx 38rpx;
			background: #ffffff;
			border-radius: 30rpx;
			.num {
				display: flex;
				justify-content: space-between;

				.left,
				.right {
					margin-top: 42rpx;
					text-align: center;
					width: 268rpx;

					.person {
						margin-bottom: 20rpx;
						font-size: 52rpx;
						font-family: DIN Alternate;
						font-weight: bold;
						color: #383f50;
					}

					.bot {
						margin-bottom: 46rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #9ba0b7;

						.cirle {
							width: 12rpx;
							height: 12rpx;
							background: #51dbac;
							box-shadow: -2px -3px 4px 0px #ffffff, 3px 1px 7px 0px #51dbac;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}
				}
			}

			.photo {
				display: flex;
				justify-content: space-between;

				.left,
				.right {
					background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/yield/img1.png') no-repeat;
					background-size: cover;
					width: 268rpx;
					height: 122rpx;
					line-height: 122rpx;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #bd8a57;
				}

				.right {
					background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/yield/img2.png') no-repeat;
					background-size: cover;
				}
			}
		}
	}

	.info {
		padding: 0 30rpx 54rpx;

		.content {
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 28rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 42rpx 26rpx;
				border-bottom: 2rpx solid #f2f2f2;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;

				image {
					width: 78rpx;
					height: 78rpx;
					margin-right: 22rpx;
					border-radius: 50%;
				}
			}

			.left {
				display: flex;
				align-items: center;
			}

			.right {
				color: #acacac;
			}
		}
	}
}

.qrbox {
	.qrpop {
		width: 600rpx;
		height: 900rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;

		.coverimg {
			width: 100%;
			height: 100%;
		}

		.close {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}

	.bot {
		height: 86rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 45rpx;

		.btn {
			width: 280rpx;
			height: 86rpx;
			background: #ffffff;
			border-radius: 44rpx;
			text-align: center;
			line-height: 86rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #194FC9;
		}

		.save {
			color: #ffffff;
			background: #194FC9;
		}
	}
}
</style>
